<template>
  <div class="home">
    <nav-bar title="招聘信息统计面板">
      <template v-slot:left>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{ chooseSection }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="产品部">产品部</el-dropdown-item>
            <el-dropdown-item command="开发室">开发室</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      <template v-slot:right>
        <div class="header-right">
          <el-button @click="dialogVisible = true" type="text">
            上传简历<i class="el-icon-upload el-icon--right"></i>
          </el-button>
        </div>
      </template>
    </nav-bar>

    <el-scrollbar class="content-wrapper">
      <div class="table-wrapper">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :default-sort="{ prop: 'time', order: 'ascending' }"
        >
          <el-table-column prop="sequence" label="序号" width="50">
            <template slot-scope="scope">
              <span>{{ scope.$index }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="name" label="姓名" width="100">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.name" />
              </template>
              <span v-else>{{ scope.row.name }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="time" label="面试时间" sortable width="180">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-date-picker
                  v-model="scope.row.time"
                  type="datetime"
                  format="MM-dd HH:mm"
                  value-format="MM-dd HH:mm"
                  placeholder="选择面试时间"
                >
                </el-date-picker>
              </template>
              <span v-else>{{ scope.row.time }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="job" label="面试岗位" width="160">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.job" />
              </template>
              <span v-else>{{ scope.row.job }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="phone" label="电话" width="120">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.phone" />
              </template>
              <span v-else>{{ scope.row.phone }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="email" label="邮箱" width="200">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.email" />
              </template>
              <span v-else>{{ scope.row.email }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="school" label="毕业学校" width="160">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.school" />
              </template>
              <span v-else>{{ scope.row.school }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="status" width="105">
            <template slot="header">
              <el-button
                @click="filterVisible = true"
                type="text"
                icon="el-icon-search"
              >
                筛选
              </el-button>
            </template>
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select v-model="scope.row.status" placeholder="请选择">
                  <el-option
                    v-for="item in ['未处理', '已处理', '已关闭']"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </template>
              <span v-else>{{ scope.row.status }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="status" width="105">
            <template slot="header">
              <el-button
                @click="$refs.ChooseSection.showView = true"
                type="text"
                icon="el-icon-search"
              >
                筛选
              </el-button>
            </template>
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select v-model="scope.row.section" placeholder="请选择">
                  <el-option
                    v-for="item in ['产品部', '开发室']"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </template>
              <span v-else>{{ scope.row.section }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <template v-if="!scope.row.edit">
                <el-button
                  @click="handleClick(0, scope.row)"
                  type="text"
                  size="small"
                >
                  详情
                </el-button>

                <el-button
                  @click="handleClick(1, scope.row)"
                  type="text"
                  size="small"
                >
                  编辑
                </el-button>

                <el-button
                  @click="handleClick(2, scope.row)"
                  type="text"
                  size="small"
                >
                  关闭
                </el-button>

                <el-button
                  @click="handleClick(3, scope.row)"
                  type="text"
                  size="small"
                >
                  发送邮件
                </el-button>
              </template>
              <template v-else>
                <el-button
                  @click="confirmEdit(scope.row)"
                  type="primary"
                  size="mini"
                >
                  保存
                </el-button>
                <el-button @click="cancelEdit(scope.row)" size="mini">
                  取消
                </el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-scrollbar>
    <up-load-file
      v-model="dialogVisible"
      :item="chooseSection"
      @saveSuccess="handleFilter"
    />
    <filtrate-view v-model="filterVisible" @selectItem="handleFilter" />
    <choose-section
      ref="ChooseSection"
      @ChooseSection="handleCommand"
      :item="chooseSection"
      :checked-items="['产品部', '开发室']"
    />
    <send-email
      v-model="emailVisible"
      v-if="emailVisible"
      :infos="emailInfo"
      @update="updateDataSource"
    ></send-email>
  </div>
</template>

<script>
import storage from 'good-storage'
import { getInfos, updateInfo } from '@/api/home'
import NavBar from '../../layouts/NavBar/index'
import UpLoadFile from './UpLoadFile'
import FiltrateView from './FiltrateView'
import SendEmail from './SendEmail'
import ChooseSection from './ChooseSection'
export default {
  components: { ChooseSection, SendEmail, FiltrateView, UpLoadFile, NavBar },
  data() {
    return {
      dialogVisible: false,
      filterVisible: false,
      emailVisible: false,
      chooseSection: '产品部',
      emailInfo: {},
      tableData: [],
      status: ['未处理', '已处理']
    }
  },
  mounted() {
    const section = storage.get('section')
    if (section && section.length) {
      this.chooseSection = section
      this.loadData()
    } else {
      this.$refs.ChooseSection.showView = true
    }
  },
  methods: {
    /** 2019-03-08
     * @Author: 刘宇琳
     * @Desc: 处理操作栏按钮事件
     */
    handleClick(index, row) {
      if (index === 0) {
        window.open(`${process.env.VUE_APP_BASE_URL}/uploads/${row.url}`)
      } else if (index === 1) {
        row.edit = true
      } else if (index === 2) {
        const params = { id: row._id, status: '已关闭' }
        this.updateDataSource(params)
      } else if (index === 3) {
        this.emailVisible = true
        this.emailInfo = row
      }
    },
    // 取消编辑
    cancelEdit(row) {
      row.name = row.originalName
      row.time = row.originalTime
      row.job = row.originalJob
      row.school = row.originalSchool
      row.phone = row.originalPhone
      row.email = row.originalEmail
      row.status = row.originalStatus
      row.section = row.originalSection
      row.edit = false
    },
    confirmEdit(row) {
      // 保存编辑
      const param = this.handleTableCellData(row)
      if (param.length === 0) {
        // 没有达到提交条件，参数没有填写完整
        return
      }
      this.updateDataSource(param)
    },
    updateDataSource(param) {
      //
      // const params = Object.keys(param)
      //
      // const pramas = `mutation{
      //                   createInfo(){
      //                     name
      //                     time
      //                   }
      //                 }
      //                 `

      updateInfo(param)
        .then(data => {
          if (data.success) {
            this.loadData()
          }
        })
        .catch(err => {
          this.$message({
            showClose: true,
            message: JSON.stringify(err),
            type: 'warning'
          })
        })
    },
    // 保存 编辑或新增 时，数据处理，校验
    handleTableCellData(row) {
      if (
        row.name.length !== 0 ||
        row.email.length !== 0 ||
        row.phone.length !== 0 ||
        row.job.length !== 0
      ) {
        const param = {
          name: row.name,
          email: row.email,
          phone: row.phone,
          job: row.job,
          status: row.status,
          time: row.time,
          sequence: row.sequence,
          school: row.school,
          id: row._id,
          section: row.section
        }
        return param
      } else {
        this.$message({
          showClose: true,
          message: '请将参数填写完整',
          type: 'warning'
        })
        return {}
      }
    },
    /** 2019-03-08
     * @Author: 刘宇琳
     * @Desc: 获取列表数据
     */
    loadData() {
      let query = `
      (status:${JSON.stringify(this.status)},
      section:"${this.chooseSection}")
      `
      if (
        !this.status ||
        this.status.length === 0 ||
        this.status.length === 3
      ) {
        query = `(section:"${this.chooseSection}")`
      }
      const pramas = `query{
        infos${query}{
          _id
          name
          job
          school
          time
          status
          phone
          email
          url
          section
        }
      }
    `
      getInfos(pramas)
        .then(data => {
          this.tableData = [...data.data.infos]
          this.filterData()
        })
        .catch(err => {
          this.$message.error(JSON.stringify(err))
        })
    },
    filterData() {
      this.tableData.map(v => {
        this.$set(v, 'edit', false)
        v.originalName = v.name
        v.originalTime = v.time
        v.originalJob = v.job
        v.originalSchool = v.school
        v.originalPhone = v.phone
        v.originalEmail = v.email
        v.originalStatus = v.status
        v.originalSection = v.section
        return v
      })
    },
    /** 2019-03-08
     * @Author: 刘宇琳
     * @Desc: 筛选功能 | 上传后刷新页面
     */
    handleFilter(selectItems) {
      if (selectItems) {
        this.status = selectItems
      }
      this.loadData()
    },
    handleCommand(item) {
      this.chooseSection = item
      storage.set('section', item)
      this.loadData()
    }
  }
}
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  .header-right {
    @include flex();
    .dropdown {
      margin-right: 10px;
    }
    .el-button--text {
      color: #fff;
    }
  }
  .content-wrapper {
    width: 100%;
    .table-wrapper {
      margin: 10px auto;
      background-color: #e0e0e0;
      box-shadow: 6px 6px 5px #e0e0e0;
      width: 1360px;
      overflow-x: hidden;
    }
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #fff;
  }
  .has-gutter {
    .el-button--text {
      &:active {
        color: #e0e0e0;
      }
    }
  }
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 160px;
  }
  .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
}
</style>
